/**
 * Created by imac13 on 19/1/6.
 */
import React,{ Component } from 'react';
import {Card,Table,Modal,Button,message} from 'antd';
import axios from './../../../axios';
import Utils from './../../../utils/utils'

class BasicTable extends Component {
    state={
        dataSource2: []
    };
    params={
        page:1
    };
    componentDidMount () {
        const dataSource = [
            {
                id:'0',
                username:'jack',
                sex:'1',
                status:'开心',
                age:'18',
                birthday:'2000-1-6'
            },
            {
                id:'1',
                username:'jack',
                sex:'1',
                status:'开心',
                age:'18',
                birthday:'2000-1-6'
            },
            {
                id:'3',
                username:'jack',
                sex:'1',
                status:'开心',
                age:'18',
                birthday:'2000-1-6'
            },
            {
                id:'4',
                username:'jack',
                sex:'1',
                status:'开心',
                age:'18',
                birthday:'2000-1-6'
            }
        ];
        dataSource.map((item,index)=>{
            item.key = index
        });
        this.setState({
            dataSource,
        });
        this.getTableList()
    };
    //动态获取数据
    getTableList = ()=> {
        let _this = this;
        let baseApi = 'https://www.easy-mock.com/mock/5c31db8667fe190a45936ab9/mockapi';
        axios.ajax({
            url:baseApi+'/table/list',
            data:{
                params:{
                    page:this.params.page
                },
            }
        }).then((res)=> {
            if(res.code == 0){
                res.result.list.map((item,index)=>{
                    item.key = index
                });
                this.setState({
                    dataSource2:res.result.list,
                    selectedRows:null,
                    selectedRowKeys:[],
                    pagination:Utils.pagination(res,(current)=>{
                        _this.params.page = current;
                        _this.getTableList();
                    })
                })
            }

        })
    };
    onRowClick = (record,index) => {
        let selectKey = [index];
        Modal.info({
            title:'提示',
            content:`用户名为${record.username},你现在的状态是${record.status}`
        });
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem:record
        })
    };
    //多选框删除
    handleDelete = () => {
        let rows = this.state.selectedRows;
        let ids = [];
        rows.map((item)=>{
            ids.push(item.id)
        });
        Modal.confirm({
            title:'删除提示',
            content:`您确定要删除这些数据吗？${ids.join(',')}`,
            onOk:()=>{
                message.success('删除成功！');
                this.getTableList()
            }
        });
    };
    render(){
        const columns = [
            {
                title: 'id',
                dataIndex :'id'
            },
            {
                title: '用户名',
                dataIndex :'username'
            },
            {
                title : '性别',
                dataIndex :'sex',
                render(sex){
                    return sex == 1 ? '男' : '女'
                }
            },
            {
                title: '状态',
                dataIndex :'status',
                render(status){
                    let config = {
                        '1':'开心',
                        '2':'不开心',
                        '3':'激动',
                        '4':'痛苦',
                        '5':'乐观',
                    };
                    return config[status]
                }
            },
            {
                title : '年龄',
                dataIndex :'age'
            },
            {
                title: '生日',
                dataIndex :'birthday'
            }
        ];
        const {selectedRowKeys} =this.state;
        const rowSelection = {
            type:'radio',
            selectedRowKeys

        };
        const rowCheckSelection = {
            type:'checkbox',
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys,
                    selectedRows
                });
                // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
        };
        return(
            <div>
                <Card title="基础表格">
                    <Table
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
                <Card title="动态数据渲染表格">
                    <Table
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
                <Card title="Mock-单选">
                    <Table
                        bordered
                        columns={columns}
                        rowSelection={rowSelection}
                        onRow={(record,index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record,index)
                                },       // 点击行

                            };
                        }}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
                <Card title="Mock-复选">
                    <Button style = {{marginBottom:'10px'}} onClick={this.handleDelete}>删除</Button>
                    <Table
                        columns={columns}
                        rowSelection={rowCheckSelection}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
                <Card title="Mock-表格分页">
                    <Table
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={this.state.pagination}
                    />
                </Card>
            </div>
        )
    }
}

export default BasicTable;